<template>
	<section>
	<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-date-picker type="datetime" placeholder="开始时间" v-model="filters.startTime" style="width:100%;"></el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-date-picker type="datetime" placeholder="结束时间" v-model="filters.endTime" style="width:100%;"></el-date-picker>
				</el-form-item>
				<el-form-item label="状态" prop="state">
					<el-select v-model="filters.state" clearable placeholder="状态">
						<el-option label="全部" value=""></el-option>
		                <el-option label="成功" value="0"></el-option>
		                <el-option label="失败" value="1"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getUsers">查询</el-button>
				</el-form-item>
			</el-form>
		</el-col>

	<!--列表-->
		<el-table :data="users" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
			<el-table-column type="index" width="100" align="center">
			</el-table-column>
			<el-table-column prop="userName" label="操作人" width="300" sortable align="center">
			</el-table-column>
			<el-table-column prop="content" label="操作内容" width="400" sortable align="center">
			</el-table-column>
			<el-table-column prop="createTime" :formatter="dateFormat" label="操作时间" width="500" sortable align="center">
			</el-table-column>
			<el-table-column label="状态" align="center">
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.state == 0">成功</el-tag>
              <el-tag type="danger" v-if="scope.row.state == 1">失败</el-tag>
            </template>
         </el-table-column>
		</el-table>

    <!--工具条-->
		<div class="toolbar" style="display: flex;justify-content: flex-end;">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="currentPage"
				:page-sizes="[10, 20, 30, 40]"
				:page-size="size"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total">
			</el-pagination>
		</div>
	</section>
</template>

<script>
 
	import { queryLog } from '../../api/api';

	export default {
		data() {
			return {
				filters: {
					state: '',
					startTime: '',
                    endTime: ''
				},
				users: [],
				total: 0,
				page: 1,
				size:10,
				listLoading: false,
				sels: [],//列表选中列
				currentPage:1,
			}
		},
  
		methods: {

         //时间格式化
        dateFormat:function(row, column) {
          var date = row[column.property];
          if (date == undefined) {
             return "";
          }
          return this.moment(date).format("YYYY-MM-DD HH:mm:ss");
        },
            handleCurrentChange(val) {
				this.page = val;
				this.getUsers();
			},
			handleSizeChange(val) {
		        this.size = val;
		        this.getUsers();
		    },
			//获取用户列表
			getUsers() {
				let userIds = JSON.parse( localStorage.getItem('userIds'));
                let authorityNow = localStorage.getItem('authority');
				let para = {
					pageIndex: this.page,
					pageSize: this.size,
					state : this.filters.state,
					userIds : userIds,
					authorityNow : authorityNow
				};
				
				if(this.filters.startTime){
					
					if(this.filters.endTime){
                    //para.endTime = moment(this.filters.endTime).format("YYYY-MM-DD[T]HH:mm:ss[Z]");
                        para.endTime = this.filters.endTime;
                    //para.startTime = moment(this.filters.startTime).format("YYYY-MM-DD[T]HH:mm:ss[Z]");
                        para.startTime = this.filters.startTime;
				    }
				}

				//刷新圆圈控件显示
				this.listLoading = true;
				queryLog(para).then((res) => {
					
				    this.users = res.body.data;
				    console.log(this.users)
					this.total = res.body.totalCount;
					//刷新圆圈控件
					this.listLoading = false;
				});
			},

			selsChange: function (sels) {
				this.sels = sels;
			},

		},
		mounted() {
			this.getUsers();
		}
	}
</script>
<style scoped>

</style>
